import React, { forwardRef } from 'react';
import { View } from '@tarojs/components';
import type { ITouchEvent } from '@tarojs/components';
import './button.scss';

// 按钮变体类型
type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
type ButtonSize = 'default' | 'sm' | 'lg' | 'icon';

export interface ButtonProps {
  /** 按钮变体样式 */
  variant?: ButtonVariant;
  /** 按钮尺寸 */
  size?: ButtonSize;
  /** 是否禁用 */
  disabled?: boolean;
  /** 子元素 */
  children?: React.ReactNode;
  /** 点击事件 */
  onClick?: (e: ITouchEvent) => void;
  /** 自定义类名 */
  className?: string;
}

/**
 * 合并类名工具函数
 */
const classNames = (...classes: (string | undefined | null | false)[]): string => {
  return classes.filter(Boolean).join(' ');
};

/**
 * Button 组件 - 适配 Taro 多端框架
 * 支持多种样式变体和尺寸
 */
const Button = forwardRef<any, ButtonProps>(
  ({ className, variant = 'default', size = 'default', disabled = false, children, onClick }, ref) => {
    const buttonClass = classNames(
      'custom-button',
      `custom-button--${variant}`,
      `custom-button--${size}`,
      disabled && 'custom-button--disabled',
      className
    );

    const handleClick = (e: ITouchEvent) => {
      if (disabled) {
        e.stopPropagation();
        return;
      }
      onClick?.(e);
    };

    return (
      <View
        className={buttonClass}
        onClick={handleClick}
      >
        {children}
      </View>
    );
  }
);

Button.displayName = 'Button';

export { Button };
